<template>
	<a-drawer :visible="_d.visible" width="500" title="我的反馈"
		@close="close()"
		:bodyStyle="{position: 'relative', overflow: 'hidden', padding: '24px'}">
		
		<a-spin :spinning="_d.loading" wrapperClassName="list-loading">
			<transition name="fade" mode="out-in">
				<feedbackList v-if="!_d.detail.show"
					v-model:title="_d.form.title" 
					:list="_d.list" 
					:paging="_d.paging"
					@load="onSearch"
					@choice="showDetail"></feedbackList>
				<feedbackDetail v-else :data="_d.detail.data"></feedbackDetail>
			</transition>
		</a-spin>
			
    <template #extra>
      <div class="btn-box">
        <a-button class="btn" @click="close()">取消</a-button>
        <a-button class="btn" v-show="_d.detail.show" type="primary" @click="backList()">返回</a-button>
      </div>
    </template>
  </a-drawer>
</template>

<script setup>
	import { reactive, ref, computed } from 'vue'
	import { Form, notification } from 'ant-design-vue';
	import { EyeOutlined } from '@ant-design/icons-vue';
	import feedbackList from "./feedbackList.vue";
	import feedbackDetail from "./feedbackDetail.vue";

	const fileRef = ref();
	const markModalRef = ref();
	
	const props = defineProps({
		// 反馈类型
		types: {
			type: Array
		},
		// 字段名称
		fieldNames: {
			type: Object
		},
		tokenKey: {
			type: String
		},
		// 接口
		api: {
			type: String
		},
		// axios实例
		instance: {
			type: Function
		}
	})

	const _d = reactive({
		visible: false,
		loading: false,

		form: {
			title: ''
		},

		list: [],

		// 分页
		paging: {
			current: 1,
			pageSize: 10,
			total: 0,
			showSizeChanger: true,
			pageSizeOptions: ['10', '20', '50', '100'],
			showTotal: (total) => `共 ${total} 条`,
			onChange (current, pageSize) {
				this.current = current;
				this.pageSize = pageSize;
				getData();
			}
		},

		// 是否显示详情
		detail: {
			show: false,
			data: {}
		}
	})

	function open () {
		_d.visible = true;

		onSearch();
	}

	function onSearch() {
		_d.paging.current = 1;
		getData();
	}

	function getData() {
		let params = {
			..._d.form,
			path: 'list'
		}

		props.instance({
			method: 'POST',
			url: props.api,
			data: params
		}).then(res => {
			let data = res.data.data;
			_d.paging.total = data.rowSum;
			// 设置列表
			_d.list = data.rowDatas.map(item => {
				item.type = getNameByValue({
					list: props.types,
					value: item.type
				})
				return item;
			});
		})
	}

	function getNameByValue (o) {
	  var res = o.else || '';
	  if (!o.list || isEmpty(o.value)) {
	    return res;
	  }
	  var list = o.list || [];
	  var valueKey = o.valueKey || 'value';
	  var nameKey = o.nameKey || 'label';

	  for (var i = 0; i < list.length; i++) {
	    if (list[i][valueKey] == o.value) {
	      res = list[i][nameKey];
	      break;
	    }
	  }
	  return res;
	}

	function isEmpty (val) {
	  if (typeof val == 'string') {
	    val = val.trim();
	  }
	  return !val && val!==0 && typeof val!=="boolean"?true:false;
	}


	function showDetail(data) {
		_d.detail.show = true;

		_d.loading = true;
		let params = {
			id: data.id,
			path: 'detail'
		}
		props.instance({
			method: 'POST',
			url: props.api,
			data: params
		}).then(res => {
			_d.detail.data = res.data.data;
		}).finally(() => {
			_d.loading = false;
		})
	}

	// 返回列表
	function backList() {
		_d.detail.show = false;
	}

	// 关闭
	function close() {
		_d.visible = false;
	}

	defineExpose({
		open
	})

</script>
<style lang="less" scoped>
.fade-enter-active, .fade-leave-active {
  transition: opacity .15s ease;
}
.fade-enter-from, .fade-leave-to {
  opacity: 0;
}

.list-loading {
	height: 100%;
	:deep(.ant-spin-container) {
		height: 100%;
	}
}

.btn-box {
	.btn:not(:first-child) {
		margin-left: 8px;
	}
}
</style>


